<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="/html/util.js"></script>
    <script>
        function $(elementId){
            return document.getElementById(elementId);
        }


        var id = getQuery("id");

        window.onload = function (){
            showProduct();
        }

        function showProduct(){
            axios.get("/product/findById",{
                params: {
                    id
                }
            }).then(e => {
                var info = e.data;
                $("productImg").src = "/html/img/" + info.imgPath;
                $("nameSpan").innerHTML = info.name;
                $("priceSpan").innerHTML = info.price;

                var str = "";
                for(var i=0;i<info.speakList.length;i++){
                    var obj = info.speakList[i];
                    str += `<tr><td>${obj.user.name}</td><td>${obj.content}</td><td>${obj.speakDate}</td></tr>`;
                }
                $("speakData").innerHTML = str;
            });
        }

        function addSpeak(){
            axios.get("/speak/add",{
                params: {
                    productId:id,
                    content:$("content").value
                }
            }).then(e => {
                if(e.data == "ok"){
                    showProduct();
                }
            });
        }
    </script>
</head>
<body>
<h2>商品详细信息</h2>
<img src="" id="productImg" width="200" height="200">
商品名：<span id="nameSpan"></span><br>
单价：<span id="priceSpan"></span><br>

评论：<table border="1" cellspacing="0" width="60%">
    <thead><tr><th>评论人</th><th>评论内容</th><th>评论时间</th></tr></thead>
    <tbody id="speakData">

    </tbody>
</table>
发表：<br>
<input type="text" id="content"><br>
<input type="button" value="添加评论" onclick="addSpeak()">
</body>
</html>